<template>
  <div class="schoolList" v-for="(data, index) in schoolListArr" :key="index">
    <div class="flex">
      <div class="schoolList-Left">
        <div v-if="data.isNewly">
          <h1 style="font-size: 24px">新增</h1>
        </div>
        <div v-else>
          <div class="df" style="align-items: baseline">
            <h1 style="font-size: 35px">{{ data.chance }}</h1>
            <span>%</span>
          </div>
          <div class="schoolList-Left-size">{{ data.probabilityExplain }}</div>
        </div>
        <div
          :class="
            data.chance_lv == 1
              ? 'chance1'
              : data.chance_lv == 2
                ? 'chance2'
                : 'chance3'
          "
          class="schoolList-Left-number"
        >
          {{ data.chance_lv == 1 ? '冲' : data.chance_lv == 2 ? '稳' : '保' }}
        </div>
      </div>
      <div
        class="schoolList-Center"
        style="flex: 1 1 0%"
        @click="handleScoolNameClick(data)"
      >
        <div class="schoolName curr">
          {{ data.collegeRealName }}
        </div>
        <div class="schoolList-size">
          {{ data.collegeRemark }}
        </div>
        <div class="schoolList-size">
          <p>
            代码: {{ data.collegeEnrollCode
            }}{{ data.groupCode ? ` 专业组代码 ${data.groupCode}` : '' }} |
            {{ data.features.join(' / ') }} |
            {{
              data.provinceName +
              ' / ' +
              data.cityName +
              ' / ' +
              data.natureType +
              ' / ' +
              data.categories.join(' / ') +
              ' / ' +
              '排名' +
              (data.rank > 0 ? data.rank : '-')
            }}
          </p>
        </div>
        <!-- <div class="schoolList-bottom">
					<div class="schoolList-bottom-size" v-for="(item,idx) in 4" :key="idx">招生简章</div>
				</div> -->
      </div>
      <div class="schoolList-people" style="width: 128px">
        <div class="schoolList-Number">
          <span style="font-size: 35px"> {{ data.planNum }}</span
          ><span style="font-size: 12px">人</span>
        </div>
        <div class="schoolList-title">{{ data.chooseSubjectText }}</div>
      </div>
      <div class="schoolList-grade" style="width: 330px">
        <div class="schoolList-grade-left" style="width: 25%">
          <div class="schoolList-grade-size">录取人数</div>
          <div class="schoolList-grade-size">线差</div>
          <div class="schoolList-grade-size">最低分</div>
          <div class="schoolList-grade-size">最低位次</div>
          <div class="schoolList-grade-size schoolList-grade-size-icon">
            <span>等效位差</span>
            <el-tooltip placement="top">
              <template #content>
                什么是等效位差？
                <br />
                历年等效位差根据考生历年的等效位-历年位次的差值得出，
                <br />
                换算后的等效位差可更精准的与历年位次进行比较。
              </template>
              <QuestionFilled style="width: 12px; margin-left: 8px" />
            </el-tooltip>
          </div>
        </div>
        <div v-for="(moreItem, index) in data.moreYear" style="width: 25%">
          <div class="schoolList-grade-left">
            <div class="schoolList-grade-size-number alitem">
              {{ moreItem.enterNum == 0 ? '-' : moreItem.enterNum }}
            </div>
            <div class="schoolList-grade-size-number alitem">
              {{ moreItem.lineDiff || '-' }}
            </div>
            <div class="schoolList-grade-size-number alitem">
              {{ moreItem.minScore == 0 ? '-' : moreItem.minScore }}
              <div
                v-if="
                  ((moreItem.zjText * 1 > 0 && moreItem.minScore * 1 > 0) ||
                    (moreItem.zjText == '有征集' && moreItem.minScore != 0)) &&
                  moreItem.minScore !== '-'
                "
                style="background-color: #fbc7c2; color: red"
              >
                征
              </div>
            </div>
            <div class="schoolList-grade-size-number alitem">
              {{ moreItem.minRank == 0 ? '-' : moreItem.minRank }}
            </div>
            <div class="schoolList-grade-size-number alitem">
              <span v-if="moreItem.equivalentBitDifference == '-'"> - </span>
              <span
                v-else-if="moreItem.equivalentBitDifference < 0"
                style="color: #ff7d00"
              >
                低{{
                  moreItem.equivalentBitDifference.toString().substring(1)
                }}</span
              >
              <span
                v-else-if="moreItem.equivalentBitDifference >= 0"
                style="color: #00b56a"
              >
                高{{ moreItem.equivalentBitDifference }}</span
              >
            </div>
          </div>
        </div>
      </div>
      <div
        style="width: 180px; padding: 40px; cursor: pointer"
        class="center alitem"
      >
        <div>
          <div
            :style="{
              color: data.isFit == 0 ? '#ccc !important' : '',
              border: data.isFit == 0 ? '1px solid #ccc !important' : '',
            }"
            class="schoolList-look-button alitem"
            :class="
              getFilledCollegeIndex(data) >= 0 ? 'zyb-fill' : 'zyb-notfill'
            "
            @click="onClickShowMajors(data)"
          >
            专业 {{ data.majorsInfo ? data.majorsInfo.length : 0 }}
            <el-icon size="20">
              <ArrowDown v-if="!isShowMajors(data)" />
              <ArrowUp v-else />
            </el-icon>
          </div>
          <div
            style="
              text-align: center;
              font-size: 12px;
              margin-top: 10px;
              color: red;
            "
            v-if="data.isFit == 0"
          >
            选科不符
          </div>
          <div
            style="text-align: center"
            v-if="getFilledCollegeIndex(data) >= 0"
          >
            已填{{ getFilledMajorNum(data) }}
          </div>
        </div>
      </div>
    </div>
    <div
      v-if="isShowMajors(data)"
      style="
        width: 100%;
        background-color: #fafbfe;
        display: flex;
        border-bottom: 1px solid #e5e6eb;
      "
      v-for="(major, index) in data.majorsInfo"
      :key="index"
    >
      <div class="schoolList-Left">
        <div v-if="major.isNewly">
          <h1 style="font-size: 24px">新增</h1>
        </div>
        <div v-else>
          <div class="df" style="align-items: baseline">
            <h1 style="font-size: 35px">{{ major.chance }}</h1>
            <span>%</span>
          </div>
          <div class="schoolList-Left-size">{{ major.probabilityExplain }}</div>
        </div>
      </div>
      <div
        class="schoolList-Center curr"
        style="flex: 1 1 0%"
        @click="handleMajor(major)"
      >
        <div class="schoolName-size">{{ major.professionRealName }}</div>
        <div class="schoolList-size">
          {{ major.remarkExt }}
        </div>
        <div class="schoolList-size">
          <div>
            代码:
            {{ major.professionEnrollCode ? major.professionEnrollCode : '-' }}
            <span v-if="!!major.mseLevel"> | </span>
            <span v-if="!!major.mseLevel" class="mseLevel">{{
              major.mseLevel
            }}</span>
          </div>
        </div>
      </div>
      <div class="schoolList-people" style="width: 128px">
        <div class="schoolList-Number">
          <span style="font-size: 35px">
            {{ major.planNum ? major.planNum : '-' }}</span
          >
          <span style="font-size: 12px">人</span>
        </div>
        <div class="schoolList-title" style="margin: 5px 0 5px">
          {{ major.chooseSubjectText ? major.chooseSubjectText : '' }}
        </div>
        <div class="schoolList-title">
          {{
            (major.learnYear ? major.learnYear : '-') +
            '年 ￥' +
            (major.cost ? major.cost : '-')
          }}
        </div>
      </div>
      <div class="schoolList-grade" style="width: 330px">
        <div class="schoolList-grade-left" style="width: 25%">
          <div class="schoolList-grade-size">录取人数</div>
          <div class="schoolList-grade-size">线差</div>
          <div class="schoolList-grade-size">最低分</div>
          <div class="schoolList-grade-size">最低位次</div>
          <div class="schoolList-grade-size schoolList-grade-size-icon">
            <span>等效位差</span>
            <el-tooltip placement="top">
              <template #content>
                什么是等效位差？
                <br />
                历年等效位差根据考生历年的等效位-历年位次的差值得出，
                <br />
                换算后的等效位差可更精准的与历年位次进行比较。
              </template>
              <QuestionFilled style="width: 12px; margin-left: 8px" />
            </el-tooltip>
          </div>
        </div>
        <div v-for="(moreItem, index) in major.moreYear" style="width: 25%">
          <div class="schoolList-grade-left">
            <div class="schoolList-grade-size-number">
              {{ moreItem.enterNum }}
            </div>
            <div class="schoolList-grade-size-number">
              {{ moreItem.lineDiff || '-' }}
            </div>
            <div class="schoolList-grade-size-number alitem">
              {{ moreItem.minScore }}
              <div
                v-if="
                  ((moreItem.zjText * 1 > 0 && moreItem.minScore * 1 > 0) ||
                    moreItem.zjText == '有征集') &&
                  moreItem.minScore !== '-'
                "
                style="background-color: #fbc7c2; color: red"
              >
                征
              </div>
            </div>
            <div class="schoolList-grade-size-number">
              {{ moreItem.minRank }}
            </div>
            <div class="schoolList-grade-size-number alitem">
              <span v-if="moreItem.equivalentBitDifference == '-'"> - </span>
              <span
                v-else-if="moreItem.equivalentBitDifference < 0"
                style="color: #ff7d00"
              >
                低{{
                  moreItem.equivalentBitDifference.toString().substring(1)
                }}</span
              >
              <span
                v-else-if="moreItem.equivalentBitDifference >= 0"
                style="color: #00b56a"
              >
                高{{ moreItem.equivalentBitDifference }}</span
              >
            </div>
          </div>
        </div>
      </div>
      <div
        style="width: 180px; padding: 40px; cursor: pointer"
        class="center alitem"
      >
        <div
          class="schoolList-look-button alitem"
          :style="{
            color: data.isFit == 0 ? '#ccc !important' : '',
            border: data.isFit == 0 ? '1px solid #ccc !important' : '',
          }"
          style="width: 60px"
          :class="getFilledMajorIndex(data, major) > 0 ? 'select' : ''"
          @click="onClickTianbao(data, major)"
        >
          {{
            getFilledMajorIndex(data, major) > 0
              ? '已填' + getFilledMajorIndex(data, major)
              : '填报'
          }}
        </div>
      </div>
    </div>
  </div>
  <Drawertool ref="drawertoolRef" />
</template>
<script setup>
import volunteersStore from '@/store/modules/volunteerInfos';
import { ElMessage } from 'element-plus';
import bus from '@/utils/bus.js';
import { searchMajor } from '@/api/appv2/appv1.js';

import Drawertool from '@/components/Drawertool';

const drawertoolRef = ref(null);

const volunteerStore = volunteersStore();

const props = defineProps({
  // 院校列表数据
  schoolListArr: {
    type: Array,
    default: [],
  },
  // 可填写志愿表数量
  volunteerNumber: {
    type: String,
    default: '0',
  },
  // 每张志愿表可填报专业数
  zy_num_group: {
    type: Number,
    default: 0,
  },
  batchs: {
    type: Array,
    default: [],
  },
  studentData: {
    type: Object,
    default: {},
  },
});

const majorLeavel = ref('');
const fetcSearchMajor = (major) => {
  let data = {
    search: major.professionRealName,
    code: major.majorCode,
  };
  searchMajor(data).then((res) => {
    if (res.code == 20000) {
      majorLeavel.value = res.data[0].level;
      major.level = majorLeavel.value - 1;

      localStorage.setItem('student_id', props.studentData.studentId);
      drawertoolRef.value.handleChangeDrawer(true, '3-1');
      nextTick(() => {
        bus.emit('handleOpenMajorDet', major);
      });
    }
  });
};

// 大学名称点击
const handleScoolNameClick = (data) => {
  localStorage.setItem('provinceId', props.studentData.gkaProvinceNumId);
  localStorage.setItem('student_id', props.studentData.studentId);
  drawertoolRef.value.handleChangeDrawer(true, '3', data);
};
// 大学下面的专业名称点击
const handleMajor = (major) => {
  fetcSearchMajor(major);
};
// 展开查看专业列表的学校ID数组
const showMajorsSchoolIDs = ref([]);

// 当前填报志愿表数据
const volunteerInfos = ref(
  computed(() =>
    volunteerStore.volunteerInfos.length ? volunteerStore.volunteerInfos : []
  )
);

// 点击展开收起专业列表
function onClickShowMajors(data) {
  let index = showMajorsSchoolIDs.value.findIndex((item) => item == data.id);
  if (index >= 0) {
    showMajorsSchoolIDs.value.splice(index, 1);
  } else {
    showMajorsSchoolIDs.value.push(data.id);
  }
}

// 是否展开专业列表
function isShowMajors(data) {
  let index = showMajorsSchoolIDs.value.findIndex((item) => item == data.id);
  return index >= 0;
}

// 是否已填志愿表并返回填报的志愿表下标
function getFilledCollegeIndex(data) {
  return volunteerInfos.value.findIndex((item) => item.id == data.id);
}

// 获取院校下已填报专业数量
function getFilledMajorNum(data) {
  let index = getFilledCollegeIndex(data);
  if (index >= 0) {
    return volunteerInfos.value[index]?.majorsInfo?.length;
  }
}

// 点击填报按钮 data:学校数据  major:专业数据
function onClickTianbao(data, major) {
  if (data.isFit == 1) {
    let fillIndex = getFilledCollegeIndex(data);

    let volunteerInfo = volunteerInfos.value;
    if (volunteerInfo.length > 0) {
      // 判断 01 11 10014 3402 140103
      // 判断入口  专业组 与学校
      if (fillIndex > -1) {
        //如果有  点击了专业的时候  可以获取到唯一值 sid_sg_name   将其进行查找  如果没有就push 如果有就删除
        const index = volunteerInfos.value[fillIndex].majorsInfo.findIndex(
          (item) =>
            item.groupCode +
              item.professionEnrollCode +
              item.collegeCode +
              item.collegeEnrollCode +
              item.majorCode ===
            major.groupCode +
              major.professionEnrollCode +
              major.collegeCode +
              major.collegeEnrollCode +
              major.majorCode
        );
        if (index > -1) {
          volunteerInfos.value[fillIndex].majorsInfo.splice(index, 1);
          if (volunteerInfos.value[fillIndex].majorsInfo.length < 1) {
            volunteerInfos.value.splice(fillIndex, 1);
          }
        } else {
          // 判断志愿表专业填报数量上限
          if (
            volunteerInfos.value[fillIndex].majorsInfo.length >=
            props.zy_num_group
          ) {
            ElMessage({
              message: '填报专业已达上限' + props.zy_num_group,
              type: 'warning',
            });
            return;
          }
          volunteerInfos.value[fillIndex].majorsInfo.push(major);
        }
      } else {
        let collegeData = JSON.parse(JSON.stringify(data));
        collegeData.majorsInfo = [major];
        volunteerInfos.value.push(collegeData);
      }
    } else {
      let collegeData = JSON.parse(JSON.stringify(data));
      collegeData.majorsInfo = [major];
      volunteerInfos.value.push(collegeData);
    }
    volunteerStore.setVolunteerInfos(
      JSON.parse(JSON.stringify(volunteerInfos.value))
    );
  } else {
    return;
  }
}

// 判断是否填报专业并返回当前填报专业数量
function getFilledMajorIndex(data, major) {
  let fillIndex = getFilledCollegeIndex(data);

  let index = volunteerInfos.value[fillIndex]?.majorsInfo?.findIndex(
    (item) => item.id == major.id
  );

  return index + 1;
}
</script>
<style lang="scss" scoped>
.schoolList {
  display: flex;
  flex-direction: column;
  border-right: none;
  background: #fff;
  position: relative;
  border-bottom: 1px solid #e5e6eb;

  .schoolList-look-button {
    color: #165dff;
    width: 90px;
    height: 40px;
    background-color: #fff;
    border: 1px solid #165dff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
  }

  .schoolList-look-button.select {
    color: white;
    background-color: #165dff;
  }

  .schoolList-grade {
    display: flex;

    .schoolList-grade-left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;

      .schoolList-grade-size {
        height: 25%;
        padding: 10px 5px;
        text-align: left;
        font-size: 12px;
        font-weight: 400;
        line-height: 12px;
        border-bottom: 1px solid #f2f3f5;
        border-right: 1px solid #f2f3f5;
      }

      .schoolList-grade-size-number {
        height: 20%;
        padding: 10px 5px;
        text-align: left;
        font-size: 12px;
        font-weight: 400;
        line-height: 12px;
        border-bottom: 1px solid #f2f3f5;
        border-right: 1px solid #f2f3f5;
        padding-left: 10px;
      }

      .schoolList-grade-size-icon {
        align-items: center;
        display: flex;
        flex-direction: row;
      }
    }
  }

  .schoolList-people {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 18px 0;
    border-right: 1px solid #e5e6eb;

    .schoolList-Number {
      text-align: center;
      font-size: 20px;
      font-weight: 400;
      color: #1d2129;
      line-height: 24px;
    }

    .schoolList-title {
      font-size: 12px;
      font-weight: 400;
      color: #86909c;
      line-height: 1.5;
    }
  }

  .schoolList-Center {
    min-width: 100px;
    margin-bottom: 10px;

    .schoolName {
      font-size: 18px;
      font-weight: 500;
      color: #1d2129;
      line-height: 27px;
      margin-left: 20px;
      margin-top: 20px;
    }

    .schoolName-size {
      font-size: 14px;
      font-weight: 400;
      color: #1d212c;
      line-height: 27px;
      margin-left: 20px;
      margin-top: 20px;
    }

    .schoolList-size {
      font-size: 12px;
      font-weight: 400;
      color: #86909c;
      line-height: 24px;
      display: flex;
      margin-left: 20px;
      align-items: center;

      .mseLevel {
        background-color: #fbe6e8;
        padding: 2px 4px;
        font-size: 10px;
        color: #f54f4a;
      }
    }

    .schoolList-bottom {
      display: flex;
      margin-left: 20px;
      margin-top: 10px;
      margin-bottom: 10px;

      .schoolList-bottom-size {
        background: #fff;
        border-radius: 2px 2px 2px 2px;
        border: 1px solid #bcc3cc;
        font-size: 12px;
        font-weight: 400;
        color: #86909c;
        padding: 0 4px;
        margin: 0 4px;
      }
    }
  }

  .schoolList-Left {
    width: 115px;
    padding-left: 40px;
    padding-top: 18px;
    padding-bottom: 18px;
    border-right: 1px solid #f2f3f5;

    .schoolList-Left-size {
      text-align: left;
      font-size: 12px;
      font-family:
        PingFang SC-Regular,
        PingFang SC;
      font-weight: 400;
      color: #86909c;
      line-height: 12px;
    }

    .schoolList-Left-number {
      width: 20px;
      height: 20px;
      // background-color: #F53F3F;
      text-align: center;
      line-height: 20px;
      border-radius: 4px;
      color: #fff;
    }
  }

  .zyb-fill {
    background-color: #165dff;
    color: white;
  }

  .zyb-notfill {
    background-color: transparent;
    color: #165dff;
    border: #165dff 2rpx solid;
  }
}

.chance1 {
  background-color: #f53f3f;
}

.chance2 {
  background-color: #ff8c33;
}

.chance3 {
  background-color: #00bf10;
}
</style>
